<script setup>
import { ref } from 'vue'

// 模拟数据
const stats = ref([
  { title: '今日总访问量', value: '373.5w+', icon: 'Document', color: '#409EFF' },
  { title: '持续增长数', value: '368', icon: 'TrendCharts', color: '#9C27B0' },
  { title: '持续减少数', value: '74', icon: 'ArrowDown', color: '#FF9800' },
  { title: '今日一日涨幅', value: '2.8%', icon: 'TrendCharts', color: '#00BCD4' }
])

const hotSearches = ref([
  { name: '龙飞虎', rank: 15, change: '+1', trend: 'up', value: '1555万', growth: '+149万', percentage: 75 },
  { name: '点击转专家', rank: 25, change: '-2', trend: 'down', value: '5713万', growth: '+757万', percentage: 35 },
  { name: '富贵中山', rank: 77, change: '+15', trend: 'up', value: '425万', growth: '-75万', percentage: 15 },
  { name: '哈牛', rank: 1, change: '-15', trend: 'down', value: '47789万', growth: '+1175万', percentage: 100 },
  { name: '首板挖掘', rank: 55, change: '-8', trend: 'down', value: '54888万', growth: '-957万', percentage: 12.7 },
  { name: '飞云江湖', rank: 22, change: '-3', trend: 'down', value: '575万', growth: '+7万', percentage: 80 },
  { name: '青小哥', rank: 34, change: '+24', trend: 'up', value: '4700万', growth: '-18万', percentage: 5 },
  { name: '数字哥', rank: 1, change: '-13', trend: 'down', value: '5665万', growth: '+88万', percentage: 80 }
])

const quickAccess = ref([
  { title: '数据统计', icon: 'DataAnalysis' },
  { title: '分析管理', icon: 'PieChart' },
  { title: '高级分析', icon: 'TrendCharts' }
])

const recentVisits = ref([
  { title: '数据统计', icon: 'Document' },
  { title: '分析管理', icon: 'PieChart' },
  { title: '高级分析', icon: 'TrendCharts' }
])
</script>

<template>
  <div class="home-view">

        <!-- 主要内容 -->
        <el-main class="main-content">
          <!-- 数据统计卡片 -->
          <el-row :gutter="20" class="stats-row">
            <el-col :span="6" v-for="(stat, index) in stats" :key="index">
              <el-card class="stat-card">
                <div class="stat-content">
                  <div class="stat-icon" :style="{ backgroundColor: stat.color }">
                    <el-icon>
                      <component :is="stat.icon" />
                    </el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-title">{{ stat.title }}</div>
                    <div class="stat-value">{{ stat.value }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 图表和热门搜索 -->
          <el-row :gutter="20" class="chart-row">
            <!-- 图表区域 -->
            <el-col :span="16">
              <el-card class="chart-card">
                <div class="chart-header">
                  <span class="chart-title">访问量统计</span>
                  <div class="chart-date">2021-03-11</div>
                </div>
                <div class="chart-content">
                  <!-- 这里可以集成 ECharts 或其他图表库 -->
                  <div class="chart-placeholder">
                    <svg width="100%" height="300" viewBox="0 0 800 300">
                      <!-- 模拟折线图 -->
                      <defs>
                        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                          <stop offset="0%" style="stop-color:#409EFF;stop-opacity:0.3" />
                          <stop offset="100%" style="stop-color:#409EFF;stop-opacity:0" />
                        </linearGradient>
                      </defs>
                      <polyline fill="url(#gradient)" stroke="#409EFF" stroke-width="2"
                        points="50,250 150,200 250,150 350,100 450,120 550,80 650,60 750,40" />
                      <circle cx="350" cy="100" r="4" fill="#409EFF" />
                      <text x="350" y="90" text-anchor="middle" class="chart-label">39,068</text>
                    </svg>
                  </div>
                </div>
              </el-card>
            </el-col>

            <!-- 右侧快捷入口和最近访问 -->
            <el-col :span="8">
              <!-- 快捷入口 -->
              <el-card class="quick-access-card">
                <div class="card-title">快捷入口</div>
                <div class="quick-grid">
                  <div v-for="(item, index) in quickAccess" :key="index" class="quick-item">
                    <el-icon class="quick-item-icon">
                      <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.title }}</span>
                  </div>
                </div>
              </el-card>

              <!-- 最近访问 -->
              <el-card class="recent-visits-card">
                <div class="card-title">最近访问</div>
                <div class="recent-grid">
                  <div v-for="(item, index) in recentVisits" :key="index" class="recent-item">
                    <el-icon class="recent-item-icon">
                      <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.title }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 热门搜索表格 -->
          <el-card class="hot-search-card">
            <div class="card-title">热门搜索</div>
            <el-table :data="hotSearches" style="width: 100%">
              <el-table-column prop="name" label="搜索名称" width="120" />
              <el-table-column prop="rank" label="持仓数量" width="100">
                <template #default="scope">
                  <span>{{ scope.row.rank }} (本周新增: {{ scope.row.change }})</span>
                </template>
              </el-table-column>
              <el-table-column prop="value" label="持仓总值" width="120" />
              <el-table-column prop="growth" label="数据增长值(近3月)" width="150">
                <template #default="scope">
                  <span :class="scope.row.growth.startsWith('+') ? 'growth-positive' : 'growth-negative'">
                    {{ scope.row.growth }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="percentage" label="买入/卖出比例(近3月)" width="200">
                <template #default="scope">
                  <div class="percentage-bar">
                    <div class="percentage-fill" :style="{ width: scope.row.percentage + '%' }"></div>
                    <span class="percentage-text">{{ scope.row.percentage }}%</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="查看详情" width="100">
                <template #default>
                  <el-button type="primary" size="small">详合详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
      </el-main>
  </div>
</template>

<style scoped>
.home-view {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
}



/* 主内容样式 */
.main-content {
  padding: 24px;
}

/* 统计卡片样式 */
.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon .el-icon {
  font-size: 24px;
  color: #fff;
}

.stat-title {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #262626;
}

/* 图表区域样式 */
.chart-row {
  margin-bottom: 24px;
}

.chart-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

.chart-date {
  font-size: 14px;
  color: #8c8c8c;
}

.chart-placeholder {
  width: 100%;
  height: 300px;
}

.chart-label {
  font-size: 12px;
  fill: #262626;
}

/* 快捷入口和最近访问样式 */
.quick-access-card,
.recent-visits-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 16px;
}

.quick-grid,
.recent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quick-item,
.recent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  border-radius: 6px;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-item:hover,
.recent-item:hover {
  background-color: #e6f7ff;
  transform: translateY(-2px);
}

.quick-item-icon,
.recent-item-icon {
  font-size: 24px;
  color: #1890ff;
  margin-bottom: 8px;
}

.quick-item span,
.recent-item span {
  font-size: 12px;
  color: #595959;
  text-align: center;
}

/* 热门搜索表格样式 */
.hot-search-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.growth-positive {
  color: #52c41a;
}

.growth-negative {
  color: #ff4d4f;
}

.percentage-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
}

.percentage-fill {
  height: 100%;
  background: linear-gradient(90deg, #52c41a 0%, #73d13d 50%, #95de64 100%);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.percentage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #262626;
  font-weight: 500;
}
</style>
